<template>
	<div id='employeeList'>
		<div class="title">{{title}}</div>
		<div class="content">
      <div class="top-content clearfix">
        <Button class="add-btn" type="primary" @click="$router.push('/views/org/employee/addEmployee')">+ Add Employee</Button>
        <!--list or card change-->
        <div class="r change-style">
          <button @click="showType = 'list'" :class="{active:showType == 'list'}"><i class="iconfont">&#xe690;</i>List</button><button @click="showType = 'card'" :class="{active:showType == 'card'}"><i class="iconfont">&#xe683;</i>Card</button>
        </div>
        <!--select group-->
        <Select class="r group-select">
          <option>21</option>
        </Select>
        <div class="search-content r">
          <input class="search-input" type="search" placeholder="Search employees"><i class="iconfont search-icon">&#xe667;</i>
        </div>
      </div>
      <!--card-->
      <div v-show="showType=='card'" class="card-content">
        <div class="card-item" v-for="(item,key) in employeeList" @click="$router.push('/views/org/employee/employeeDetail/'+ item.id)">
          <div class="info">
            <div class="avatar-content">
              <img v-if="item.avatar" class="avatar-img" :src="item.avatar">
              <span v-if="!item.avatar" v-html="setAvatarName(item.name)"></span>
            </div>
            <div class="name">{{item.name}}</div>
            <div class="job"><label>Job Title  :  </label>{{item.jobTitle}}</div>
            <div class="org"><label>org  :  </label>{{item.department}}</div>
            <Row class="contact">
              <i-col class="text_ellipsis" span="8"><i class="iconfont tel-icon">&#xe68c;</i>{{item.workTel}}</i-col>
              <i-col class="text_ellipsis" span="8"><i class="iconfont phone-icon">&#xe68a;</i>{{item.cellPhone}}</i-col>
              <i-col class="text_ellipsis" span="8"><i class="iconfont email-icon">&#xe685;</i>{{item.emailAddress}}</i-col>
            </Row>
          </div>
          <div class="location">
            <i class="iconfont location-icon">&#xe688;</i>{{item.cityOrTown}} <i class="iconfont delete-icon r" @click.stop="deleteEmployee($event,item.id)">&#xe668;</i>
          </div>
        </div>
      </div>
      <!--list-->
      <div v-show="showType=='list'"  class="table-content">
        <i-table @on-row-dblclick="rowDbClick" class="table-panel" :columns="employeeColumns" :data="employeeList"></i-table>
      </div>
      <div class="page-content">
        <Page v-if="employeeList && employees.pages>1" class-name="page"  :total="employees.count" :current="employees.page" @on-change="changePage"></Page>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		name: 'EmployeeList',
		components: {},
		created(){
			this.init();
    },
		computed:{
      employees(){
        return this.$store.getters.employees;
      }
    },

		data () {
			var t = this;
			return {
				title: 'Employee List',
        showType:'card',
        page:{
          page:1,
          pageSize:20
        },
        employeeColumns:[
          {
          	key:'name',
            title:'Name',
            ellipsis:true,
            width:'200px',
            className:'name-column',
            render:function (row,column,index) {
          		if(row.avatar){
                return `<img class="avatar-img"  src="${row.avatar}">${row.firstName + " " +  row.middleName + " " + row.preferredName}`
              }else{
                var avatar = t.setAvatarName(row.name);
                return `<span>${avatar}</span><span>${row.firstName + " " +  row.middleName + " " + row.preferredName}</span>`;
              }
            }
          },
          {
            key:'employeeId',
            title:'Employee ID'
          },
          {
            key:'workAddress',
            title:'City'
          },
          {
            key:'state',
            title:'State'
          },
          {
            key:'jobTitle',
            title:'Job Title'
          },
          {
            key:'cellPhone',
            title:'Phone'
          },
          {
          	key:'status',
            title:'Status'
          },
          {
          	title:'  ',
            width:'80px',
            align:'left',
            className:'edit-column',
            render:function (row, column, index) {
              return  ` <i class="iconfont delete-icon" @click.stop="deleteEmployee($event,${row.id})">&#xe668;</i>`;
            }
          }
        ],
        employeeList:[]
			}
		},
    watch:{
			'page.page'(){
        this.getEmployeeList();
      },
      employees(value){
        this.employeeList = value.records;
      }
    },
    methods:{
			init(){
				this.getEmployeeList();
      },
      getEmployeeList(){
        this.$store.dispatch('getEmployees',this.page);
      },
      deleteEmployee(e,id){
        this.$Modal.confirm({
          title: 'Delete Employee',
          content: '<p>Delete this employee?</p>',
          loading: true,
          onOk: () => {
            this.$store.dispatch('delEmployee',{id:id}).then(
              () =>{
                this.$Modal.remove();
                this.getEmployeeList();
                this.$Message.info('delete success!');
              }
            )
          }
        });
      },
      changePage(page){
      	this.page.page = page;
      },
      setAvatarName(name){
        var color =
          {
            A:'#F8C69F',
            B:'#348fff',
            C:'#A3D572',
            D:'#FF8C69',
            E:'#f08913',
            F:'#ff34c6',
            G:'#FF8C69',
            H:'#418570',
            I:'#563f28',
            J:'#FF8C69',
            K:'#9843ff',
            L:'#348fff',
            M:'#FF8C69',
            N:'#348fff',
            O:'#ff5359',
            P:'#561721',
            Q:'#2c5685',
            R:'#0d1256',
            S:'#b45bff',
            T:'#6512ff',
            U:'#ff0337',
            V:'#348fff',
            W:'#FF8C69',
            X:'#c161ff',
            Y:'#405635',
            Z:'#a52bc0',
          };
      	name = name || "";
        if(!name){
          return `<span class="avatar-name" style="background-color:${color['A']}" > - </span>`
        }
        var aName = name.split(' '),showName;
        var first = aName[0].charAt(0).toUpperCase();
        var second = aName[1].charAt(0).toUpperCase();
        return `<span class="avatar-name" style="background-color:${color[first]}" >${first + second}</span>`
      },
      rowDbClick(row){
        this.$router.push('/views/org/employee/employeeDetail/'+ row.id);
      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";

	#employeeList {
    >.content{
      >.top-content{
        margin-bottom: 13px;
        .add-btn{
          width: 140px;
          height: 34px;
          /*font-family: PingFangTC-Regular;*/
          font-size: 12px;
          color: #FFFFFF;
          background: #009AFF;
          border-radius: 2px;
          &:hover{
            opacity: .8;
          }
        }
        .search-content{
          position: relative;
          float: right;
          width: 220px;
          height: 36px;
          margin-right: 15px;
          >.search-input{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border: 1px solid $baseBorderColor;
            border-radius: 3px;
            padding: 0 12px 0 40px;
            &:focus{
              border: 1px solid #76C9FF;
              box-shadow: 0 0 2px 0 #009AFF;
              border-radius: 3px;
            }
          }
          >.search-icon{
            position: absolute;
            left: 10px;
            top:6px;
            font-size: 20px;
            color:#96ACB9;
          }
        }
        .group-select{
          width: 115px;
          .ivu-select-selection{
            height: 36px;
            background: #FFFFFF;
            border-radius: 3px;
          }
          margin-right: 15px;
        }
        .change-style{
          button{
            width: 64px;
            height: 36px;
           /* font-family: PingFangTC-Regular;*/
            font-size: 12px;
            color: #375874;
            background-color: #fff;
            border: 0;
            outline: 0;
            border: 1px $baseBorderColor solid;
            cursor: pointer;
            &:hover{
              color: $baseColor;
              .iconfont{
                color: $baseColor;
              }
            }
            .iconfont{
              font-size: 12px;
              color:#9FB3BF;
              margin-right: 4px;
              vertical-align: middle;
            }
            &:first-child{
              border-right:0 ;
            }
            &.active{
              background-color: $baseColor;
              color:#fff;
              border: 1px $baseColor solid;
              .iconfont{
                color:#fff;
            }
            }
          }
        }
      }
      .card-content{
        display: flex;
        flex-wrap:wrap;
        justify-content: flex-start;
        >.card-item{
          width: 370px;
          height: 227px;
          margin: 0 25px 23px 0;
          background: #FFFFFF;
          box-shadow: 0 2px 6px 0 rgba(184,198,239,0.80);
          border-radius: 4px;
          cursor: pointer;
          &:nth-child(3n){
            margin-right: 0;
          }
          &:hover{
            box-shadow: 6px 10px 15px 0 rgba(184,198,239,0.80);
            >.location .delete-icon{
              display: inline-block;
            }
          }
          >.info{
            height: 190px;
            padding: 12px 15px;
            border-bottom: 1px $baseBorderColor solid;
            text-align: center;
            >.avatar-content{
              text-align: center;
              .avatar-img{
                width: 57px;
                height: 57px;
                border-radius: 50%;
              }
              .avatar-name{
                display: inline-block;
                width: 57px;
                height: 57px;
                line-height: 57px;
                text-align: center;
                border-radius: 50%;
                /*font-family: PingFangTC-Regular;*/
                font-size: 22px;
                color: #fff;
                background-color: #A3D572;
              }
            }
            >.name{
              line-height: 25px;
              margin-bottom: 11px;
             /* font-family: PingFangTC-Medium;*/
              font-size: 18px;
              color: #375874;
            }
            >.job,.org{
              /*font-family: PingFangTC-Regular;*/
              font-size: 12px;
              color: #190000;
              margin-bottom: 10px;
              >label{
                color: #9FB3BF;
              }
            }
            >.contact{
             /* font-family: PingFangTC-Regular;*/
              font-size: 11px;
              color: #375874;
              .tel-icon,.phone-icon,.email-icon{
                font-size: 10px;
                color: #9FB3BF;
                margin-right: 2px;
                vertical-align: middle;
              }
            }
          }
          >.location{
            padding: 0 25px;
            line-height: 34px;
          /*  font-family: PingFangTC-Regular;*/
            font-size: 12px;
            color: #375874;
            .location-icon{
              font-size: 12px;
              color: #9FB3BF;
              margin-right: 13px;
            }
            >.delete-icon{
              font-size: 20px;
              color: $baseColor;
              display: none;
            }
          }
        }
      }
      /*TABLE=======*/
      .table-content{
        .table-panel{
          width: 1160px;
          /*编辑列*/
          .edit-column {
            .delete-icon{
              font-size: 20px;
              color: $baseColor;
              margin:  0 6px;
              &:hover{
                opacity: .7;
              }
            }
          }
          /*头像名称列*/
          .name-column{
            .avatar-img{
              width: 36px;
              height: 36px;
              margin-right: 14px;
              border-radius: 50%;
              vertical-align: middle;
            }
            .avatar-name{
               display: inline-block;
               width: 36px;
               height: 36px;
               line-height: 36px;
               text-align: center;
               margin-right: 6px;
               border-radius: 50%;
               /*font-family: PingFangTC-Regular;*/
               font-size: 14px;
               color: #fff;
               background-color: #A3D572;
            }
          }
        }
      }
    }
	}
</style>
